<template>
	<h1>This is an about page,count:{{ count }}</h1>
	<button @click="onClickButton($event)">按我</button>
	<button @click="onClickGetDataButton($event)">模拟获取数据</button>
	<button @click="onClickRefershButton($event)">模拟刷新数据</button>
	<button @click="onClickInitButton($event)">模拟从头来数据</button>
	<button @click="onClickRowButton($event)">模拟修改行数数据</button>
	<div>
		<p>{{ page.currPage }}</p>
		<p>{{ page.totalPages }}</p>
		<p>{{ page.rowNumber }}</p>
	</div>

	<div>
		<button @click="clickLogin($event)">登录</button>
		<button @click="clickLogOut($event)">登出</button>
	</div>
	<div>
		<p>{{ user.userName }}</p>
	</div>
</template>

<script lang="ts">
import usePage from "../hook/page";
import useRequet, { RespData } from "../hook/network";
import useUser from "../hook/user";
import { defineComponent, onMounted, reactive, ref } from "vue";

export default defineComponent({
	name: "About",

	setup: () => {
		const request = useRequet({ path: "user/" });
		const user = useUser();
		// const point = useMousePosition();
		const count = ref(0);
		const page = usePage({
			rowNumber: 30,
			getData: (page: number, rowNumber: number) => {
				console.log("这里是去获取数据的代码。", page, rowNumber);
				return getDataList();
				// return page * rowNumber * 10;
			},
		});

		// onMounted(() => {
		// 	page.init();
		// });

		let getDataList = () => {
			let count = 0;
			request.sendRequest({
				address: "/list.do",
				success: (resp: RespData) => {
					aa = resp.data.list;
					count = 20;
					console.log("成功");
				},
				fail: () => {},
				method: "POST",
			});
			return count;
		};

		let aa = reactive({});
		return { count, page, request, aa, user };
	},

	// renderTriggered(event) {
	// 	debugger;
	// },
	methods: {
		onClickButton(event: MouseEvent) {
			this.count++;
		},
		onClickGetDataButton(event: MouseEvent) {
			this.page.next();
		},
		onClickRefershButton(event: MouseEvent) {
			this.page.refresh();
		},
		onClickInitButton(event: MouseEvent) {
			this.page.init();
		},
		onClickRowButton(event: MouseEvent) {
			this.page.setRowNumber(5);
		},
		clickLogOut(event: MouseEvent) {
			this.user.logOut();
		},
		clickLogin(event: MouseEvent) {
			this.request.sendRequest({
				address: "login",
				params: {
					loginName: "login",
					password: "pass",
				},
				success: (resp: RespData) => {
					console.debug("登录成功");
				},
				fail: () => {
					console.debug("登录失败？");
				},
				method: "POST",
			});
		},
	},
});
</script>
